<template>
    <div class="list-container">
        <div class="list-panel" :class="{ 'activeHide': isHideList }">
            <div class="title">
                <img :src="require('./images/title.png')" /> &nbsp;&nbsp;
                <span>统计图表</span>
            </div>
            <el-table :data="tableData" border>
                <el-table-column label="编号" width="50">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="年份" width="70">
                    <template slot-scope="scope">
                        {{ scope.row.year }}
                    </template>
                </el-table-column>
                <el-table-column label="作者" width="130">
                    <template slot-scope="scope">
                        {{ scope.row.author }}
                    </template>
                </el-table-column>
                <el-table-column label="分辨率" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.range }}
                    </template>
                </el-table-column>
                <el-table-column label="时间顺序" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.timeOrder }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 使用element ui的table组件 生成 -->
            <div class="title">
                <img :src="require('./images/title.png')" /> &nbsp;&nbsp;
                <span></span>
            </div>
            <div class="charts-content">
                <span style="font-size: 16px;color: #fff;padding-left: 10px;">
                    {{ }}
                </span>
                <div class="charts" ref="charts"></div>
            </div>
            <!-- <div class="title">
                <img :src="require('./images/title.png')" /> &nbsp;&nbsp;
                <span></span>
            </div>
            <div class="search-panel">
                <img :src="require('./images/list/search.png')" />
                <input type="text" placeholder="Search by name" v-model="searchText" @keyup.enter="searchKeywords" />
            </div>
            <div class="item-title">
                <div class="item-left"> &nbsp; &nbsp; &nbsp; </div>
                <div class="item-middle">   </div> 
                <div class="item-right"> </div>
            </div>
            <div class="list-content">
                <div class="item" :class="{ 'active': item.ranking === selectItemRanking }"
                    v-for="(item, index) in res" :key="index" @click="showDetail(item)">
                    <div class="item-left"> &nbsp; {{ item.province + item.city }} </div>
                    <div class="item-middle"> &nbsp; 
                        &nbsp; {{ item.aqi }} </div> 
                    <div class="item-right"
                        :class="{ 'alarm-level-0': item.ranking < 400, 'alarm-level-1': item.ranking < 300, 'alarm-level-2': item.ranking < 200, 'alarm-level-3': item.ranking < 100, 'alarm-level-4': item.ranking < 50 }">
                        &nbsp; {{ item.ranking }} </div>
                    
                </div>
            </div> -->
        </div>
        <div class="btn-panel" @click="isHideList = !isHideList" :class="{ 'activeHide': isHideList }">
            <img :src="isHideList ? require('./images/list/left.png') : require('./images/list/right.png')" />
        </div>
    </div>
</template>

<script>
import * as L from "leaflet";
import * as echarts from 'echarts'

const { mars3d } = window

export default {
    name: 'equipmentList',
    props: {
        map: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            searchText: '',
            xy_coor: '',
            res: [],
            res_temp: [],
            isHideList: false,
            selectItemRanking: '',
            deviceMarkers: [],
            tips: '',

            tableData: [
                {
                    id: '01',
                    name: 'Zhang_Lei_Song',
                    year: '2024',
                    author: 'ZhangLeiSong',
                    range: '0.5',
                    timeOrder: '1'
                },
                {
                    id: '02',
                    name: 'USTCLitho',
                    year: '2025',
                    author: 'Song&Lei',
                    range: '0.5',
                    timeOrder: '2'
                },
                {
                    id: '03',
                    name: '',
                    year: '',
                    author: '',
                    range: '',
                    timeOrder: ''
                },
            ]
        }
    },
    watch: {
    },
    mounted() {
        console.log(this.map)
        let timer = setInterval(() => {
            if (this.map) {
                clearInterval(timer)
                this.map.on(mars3d.EventType.click, function (event) {
                    console.log('单击了地图', event)
                    // 笛卡尔坐标转经纬度坐标
                    var cartesian = event.cartesian // x, y, z 是你的笛卡尔坐标值

                    // 转换为经纬度坐标
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

                    // 输出结果
                    let Longitude = Cesium.Math.toDegrees(cartographic.longitude)
                    let Latitude = Cesium.Math.toDegrees(cartographic.latitude); // 纬度，转换为度数
                    let longitude = Math.round(Longitude * 2) / 2
                    let latitude = Math.round(Latitude * 2) / 2

                    this.axios.post('/crud/query', {
                        // sql: `select * from vs_model where long='${longitude}' and lat='${latitude}' and model_num='${this.ruleForm.selectModelNum}'`
                        sql: `select * from vs_model where long='${longitude}' and lat='${latitude}'`
                    }).then(res => {
                        if (res.data.success) {
                            this.res = res.data.data.body
                            console.log(this.res)
                            let arrs = this.res.sort((a, b) => a.depth - b.depth)
                            let xData = arrs.map(item => item.depth)
                            let yData = arrs.map(item => item.vel)
                            this.initCharts(yData, xData)
                        } else {
                            this.$message.error('查询失败')
                        }
                    })

                }, this)
            }

        }, 1000)

    },
    methods: {
        searchKeywords() {
            this.res = this.res_temp.filter(item => {
                return (item.province + item.city).includes(this.searchText)
            })
        },
        getAllEquipments() {
            this.axios.get('https://tiles.geovisearth.com/meteorology/v1/weather/cn/realtime/aqi/rank', {
                params: {
                    asc: true,
                    token: '0f6a2507659fef660c63f88bb875abfd6a2314ef02aa8cc00e02d768af65dad7'
                },
            }).then(res => {
                if (res.status === 200) {
                    console.log(res.data.result.datas)
                    // this.visible = false
                    this.res = res.data.result.datas;
                    this.res_temp = res.data.result.datas;
                } else {
                    this.res = []
                    this.$message.error(res.data.message)
                }
            })
        },
        showDetail(item) {
            this.selectItemRanking = item.ranking
        },
        addMarkers(data) {
            // 先清空再渲染
            this.deviceMarkers.forEach(marker => {
                marker.remove();
            });
            this.deviceMarkers = [];

            let markers = [];
            data.forEach(item => {
                markers.push(L.marker([item.device_Latitude, item.device_Longitude].map(Number), {
                    icon: L.divIcon({
                        html: `<div class="div-wrap"><img src="" width=15 height=30 /></<div>`,
                        className: 'my-div-icon'
                    }),
                    iconAnchor: [9, 42]
                }).bindPopup(() => {
                    const el = document.createElement('div');

                    ['device_AlarmState', 'device_Details',
                        'device_GroupID', 'device_Height',
                        'device_ID',
                        'device_InstallationDate',
                        'device_Latitude',
                        'device_Longitude',
                        'device_MonitorRange',
                        'device_MonitorResolution',
                        'device_Name',
                        'device_SysState',
                        'device_WorkingChannel'].forEach(key => {
                            if (item[key]) {
                                el.innerHTML += `<div>${key}: ${item[key]}</div>`;
                            }
                        });
                    return el;
                }).addTo(this.map));
            })
            this.deviceMarkers = markers;

        },
        initCharts(list = [], data = []) {
            // 饼状图, 自定义颜色
            let chart = echarts.init(this.$refs.charts)
            chart.clear()

            const option = {
                title: {
                    show: true,
                    text: '当前经纬度在深度上的速度分布',
                    top: '0',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    show: true,
                    data: ['速度'],
                    // orient: 'vertical', // 设置为垂直布局
                    // right: '0%', // 将 legend 放到右侧
                    top: '10%', // 垂直居中
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    // top: '1%',
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    // type: 'value',
                    data,
                    // 颜色
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    },
                    splitLine: {
                        show: false // 去掉中间的网格横线
                    }
                },
                yAxis: {
                    type: 'value',
                    // 颜色
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#fff' // 纵轴网格线颜色
                        }
                    }
                },
                series: [
                    {
                        name: '速度',
                        type: 'line',
                        stack: 'Total',
                        data: list,
                    },
                ]
            };
            chart.setOption(option)
        }
    }
}
</script>

<style scoped>
.list-container {
    z-index: 999;
    position: fixed;
    top: 98.5px;
    right: 0px;
    width: 585px;
    /* height: calc(100% - 305px); */
    /*  - 135px */


    .project-name {
        color: #fff;
        font-size: 22px;
        text-align: center;
        margin-bottom: 2px;
        text-shadow: 2px 1px 7px #000;
        white-space: nowrap;
    }

    .list-panel {
        background-color: rgba(4, 19, 30, 0.5);
        border-radius: 8px;
        padding: 4px 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 2px solid #2A748A;
        color: #fff;
        padding-bottom: 20px;
        /* height: calc(100% - 32px); */
        /* 抽屉效果 */
        transition: transform 0.5s ease-in-out;

        &.activeHide {
            transform: translateX(585px);
        }

        .title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            font-size: 18px;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #2A748A;

            img {
                width: 16px;
            }
        }

        .search-panel {
            margin-top: 10px;
            width: 100%;
            position: relative;

            img {
                position: absolute;
                left: 8px;
                top: 8px;
                width: 16px;
            }

            input {
                height: 30px;
                display: block;
                width: 308px;
                border-radius: 30px;
                background: rgba(64, 237, 255, 0.2);
                border: 0;
                padding-left: 30px;
                color: #fff;

                &:focus {
                    outline: none;
                    color: #fff;
                    caret-color: rgba(64, 237, 255, 0.5);
                }
            }
        }

        .item-title {
            width: 100%;
            display: flex;
            margin: 5px 0;
            padding: 2px 0;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            &.active {
                background-color: rgba(64, 237, 255, 0.2);
            }

            .item-left {
                font-size: 16px;
                width: 200px;
                text-align: left;
            }

            .item-middle {
                font-size: 14px;
                width: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            .item-right {
                font-size: 14px;
                font-weight: bold;
                width: 50px;
                text-align: center;
            }
        }

        .list-content {
            padding-left: 10px;
            overflow-y: auto;

            .item {
                width: 100%;
                display: flex;
                margin: 5px 0;
                padding: 2px 0;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                &.active {
                    background-color: rgba(64, 237, 255, 0.2);
                }

                .item-left {
                    font-size: 16px;
                    width: 200px;
                    text-align: left;
                }

                .item-middle {
                    font-size: 14px;
                    width: 50px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                .item-right {
                    font-size: 14px;
                    font-weight: bold;
                    width: 50px;
                    text-align: center;
                    background-color: #fff;

                    &.alarm-level-0 {
                        color: #FF0100;
                    }

                    &.alarm-level-1 {
                        color: #ff8100;
                    }

                    &.alarm-level-2 {
                        color: #fefe00;
                    }

                    &.alarm-level-3 {
                        color: #98cc00;
                    }

                    &.alarm-level-4 {
                        color: #058200;
                    }
                }
            }

        }

        /* 修改滚动条样式 */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #20edde;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-track {
            /* background-color: #081D32; */
            /* border-radius: 2px; */
        }
    }

    /* 按钮 */
    .btn-panel {
        position: absolute;
        right: 100%;
        top: 50%;
        background: rgba(4, 19, 30, 0.5);
        width: 16px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 18px 0 0 18px;
        cursor: pointer;
        transition: transform 0.5s ease-in-out;

        &.activeHide {
            transform: translateX(585px);
        }
    }

    .charts-content {
        .charts {
            width: 360px;
            height: 250px;
        }
    }
}
</style>